<template>
    <el-row :gutter="5" >
        <el-col :xs="24" :sm="24" :md="24" :lg="12" class="mb10">
            <el-card class="update-log" style="padding: 5px;height: 150px">
                <div slot="header" class="clearfix">
                    <span>快捷方式</span>
                </div>
                <el-row style="background:#fff;padding:5px 5px 0;margin-bottom:5px;">
                    <shortcutCard  ref="shortcutCardRef"   />
                </el-row>
            </el-card>
        </el-col>

        <el-col :xs="24" :sm="24" :md="24" :lg="12" class="mb10">
          <el-card class="update-log" style="padding: 5px;height: 150px">
                <div slot="header" class="clearfix">
                    <span>接口统计</span>
                </div>
                <el-row class="update-log-container" :gutter="5" style="background:#fff;padding:5px 5px 0;margin-bottom:5px;">
                    <el-col :span="8" class="port-number-item">
                      <div class="left-icon">
                        <Management style="width: 1em; height: 1em"/>
                      </div>
                      <div class="right-content">
                        <div class="text">收录接口总数</div>
                        <div class="number">{{ sstInfCount.TOTAL }}</div>
                      </div>
                    </el-col>
                    <el-col :span="8" class="port-number-item">
                      <div class="left-icon" style="background-color: var(--el-color-success);">
                        <Checked style="width: 1em; height: 1em"/>
                      </div>
                      <div class="right-content">
                        <div class="text">启用接口总数</div>
                        <div class="number">{{ sstInfCount.ENABLECOUNT }}</div>
                      </div>
                    </el-col>
                    <el-col :span="8" class="port-number-item">
                      <div class="left-icon" style="background-color: var(--el-color-warning);">
                        <Failed style="width: 1em; height: 1em"/>
                      </div>
                      <div class="right-content">
                        <div class="text">停用接口总数</div>
                        <div class="number">{{ sstInfCount.STOPCOUNT }}</div>
                      </div>
                    </el-col>
                </el-row>
            </el-card>
        </el-col>
    </el-row>

    <div v-if="true" class="dashboard-container div2">
        <el-row class="report-container">
            <el-col :xs="24" :sm="24" :md="24" :lg="24" style="padding: 3px; align-items:stretch;">
                <el-card class="update-log">
                    <div slot="header" class="clearfix card-header">
                        <span>测试报告</span>
                    </div>
                    <el-row style="background:#fff;padding:5px 5px 0;margin-bottom:5px;">
                        <reportComponent ref="reportComponentRef" style="padding: 5px !important;"/>
                    </el-row>
                </el-card>
            </el-col>
        </el-row>
    </div>

</template>

<script setup name="dashboard">
import {Management,Checked,Failed} from '@element-plus/icons-vue'
import {getCurrentInstance} from "vue";
import reportComponent from '@/views/testmanage/report/reportComponent'
const {proxy} = getCurrentInstance();
import shortcutCard from '@/views/dashboard/zhb/components/shortcut'
import PerFormanceDetail from "@/views/dashboard/zhb/components/perFormanceDetail.vue";
import useUserStore from '@/store/modules/user'
import _ from "lodash";
const tableData = ref([])
const timer = ref(null)
import { countInf } from "@/api/testmanage/sstinf";
const userStore = useUserStore()
import { isNotVoid } from '@/utils/util';
import { isVoid } from '../../../utils/util';
const reportShow = ref(false)
const selectServer = ref('')
const rowData = ref({})
const data = reactive({
  sstInfCount: {},
})

const {sstInfCount} = toRefs(data);

function goTarget(url) {
  window.open(url, '__blank')
}

watch(() => selectServer.value, (nv, ov) => {
  if(nv != ov) {
    tableData.value.forEach((item) => {
      if(item.ipPort == nv) {
        rowData.value = item
      }
    })
  }
})

const loadDataList = () => {
}

const loadSsfCount = () => {
  countInf().then(res => {
    sstInfCount.value = res.data
  })
}

const getStatus = (value) => {
    value = Number(value)
    let result = "";
    if (value<=0.6){
        result = "success"
    }else if (value<=0.8){
        result = "warning"
    }else if (value>=0.8){
        result = "exception"
    }
    return result;
}

const getRepTimeStatus = (value) => {
    value = Number(value)
    let result = "";
    if (value<=1000){
        result = "success"
    }else if (value<=30000){
        result = "warning"
    }else if (value>=30000){
        result = "danger"
    }
    return result;
}

loadDataList()
loadSsfCount()

onMounted(()=>{
    timer.value = setInterval(()=>{
        loadDataList()
    },20000)
})

onUnmounted(()=>{
    clearInterval(timer.value)
    timer.value = ""
})

</script>

<style scoped lang="scss">
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }
  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
    font-size:25px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    display: flex;
    flex-direction: column;
    .update-log-container{
      flex: 1;
    }
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}
.clearfix{
  // border-left: 3px solid #0599D9;
  // padding-left: 10px;
  font-weight: bold;
  font-size: var(--el-font-size-large);
  padding-left: 10px;
  position: relative;
  line-height: 1;
  padding: 8px 0 8px 10px;
  &::before{
    content: '';
    width: 3px;
    height: 18px;
    background-color: var(--el-color-primary);
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    position: absolute;
  }
}

.grid-container {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr; /* 两列，均分 */
    grid-gap: 10px; /* 相邻格子之间的间距 */
}

.box {
    height: 40vh; /* 每个盒子高度为50% */
    /*background-color: #ccc; !* 示例：设置背景颜色 *!*/
}
.api-count {
  font-size: 22px;
  color: #333;
}
.div2 {
    grid-area: 2 / 1 / 3 / 2;
    width: 100%;
    overflow: hidden;
    
}
.report-container{
  height: 100%;
  overflow: hidden;
  >.el-col{
    height: 100%;
  }
  .update-log{
    height: 100%;
    :deep(.el-card__body){
      height: 100%;
      display: flex;
      flex-direction: column;
      >.el-row{
        flex: 1;
        overflow: hidden;
        >.app-container{
          // padding-top: 16px;
          height: 100%;
          overflow: hidden;
          padding: 0;
          overflow: hidden;
          .table-container{
            flex: 1 0;
          }

        }
      }
    }
  }
}
.dashboard-container{
  flex:1;
  position: relative;
  .dashboard-container-select{
    position: absolute;
    right: 11px;
    top: 5px;
    width: fit-content;
  }
}
.dashboard-serve-container{
  :deep(.el-card__body){
    height: 100%;
    display: flex;
    flex-direction: column;
  }
}
.port-number-item{
  display: flex;
  align-items: center;
  .left-icon{
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    color: #fff;
    background-color: var(--el-color-primary);
    margin-right: 10px;
    font-size: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .right-content{
    .text{
      margin-bottom: 10px;
    }
    .number{
      font-weight: bold;
      font-size: 22px;
    }
  }
}
</style>

